Team Profiles
**Referenced Files in This Document** - [team.11tydata.json](file://src/content/team/team.11tydata.json) - [team.njk](file://src/team.njk) - [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk) - [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js) - [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css) - [20-team-page-full-profiles.css](file://src/assets/css/modules/20-team-page-full-profiles.css) - [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md) - [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md) - [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md) - [04-mel-jones.md](file://src/content/team/04-mel-jones.md) - [config.yml](file://src/admin/config.yml) - [config.ts](file://tina/config.ts) - [schema.gql](file://tina/__generated__/schema.gql) - [types.ts](file://tina/__generated__/types.ts)Table of Contents
- Introduction
- Project Structure
- Core Components
- Architecture Overview
- Detailed Component Analysis
- Dependency Analysis
- Performance Considerations
- Troubleshooting Guide
- Conclusion
- Appendices
Introduction
This document explains the Team Profiles content collection used to present staff members across the website. It covers the frontmatter schema, content creation workflow, the interactive flip card component, how profiles are rendered on the main team page and individual profile pages, and how team members relate to case study contributions. It also provides guidance on photo standards, content updates, and maintaining consistency across profiles.
Project Structure
Team profiles are authored as Markdown files under the content directory and transformed into HTML via Eleventy. The team page template renders a grid of interactive cards and a full-profile layout for each team member. Styles define the card flip behavior and responsive presentation. Content editing is supported through both the Netlify CMS configuration and the TinaCMS configuration.
graph TB
subgraph "Content"
T1["team.11tydata.json"]
M1["01-matt-neagle.md"]
M2["02-kevin-naughton.md"]
M3["03-guy-boekenstein.md"]
M4["04-mel-jones.md"]
end
subgraph "Templates"
P["team.njk"]
C["team-flip-card.njk"]
end
subgraph "Styles"
S1["12-team-grid-homepage-teaser.css"]
S2["20-team-page-full-profiles.css"]
end
subgraph "Scripts"
J["team-card-flip.js"]
end
subgraph "Edit Configurations"
N["admin/config.yml"]
TCFG["tina/config.ts"]
end
T1 --> P
M1 --> P
M2 --> P
M3 --> P
M4 --> P
C --> P
S1 --> P
S2 --> P
J --> P
N --> M1
N --> M2
N --> M3
N --> M4
TCFG --> M1
TCFG --> M2
TCFG --> M3
TCFG --> M4
Diagram sources
- [team.11tydata.json](file://src/content/team/team.11tydata.json)
- [team.njk](file://src/team.njk)
- [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk)
- [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css)
- [20-team-page-full-profiles.css](file://src/assets/css/modules/20-team-page-full-profiles.css)
- [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js)
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
Section sources
- [team.11tydata.json](file://src/content/team/team.11tydata.json)
- [team.njk](file://src/team.njk)
Core Components
- Content source: Markdown files under src/content/team with frontmatter defining metadata and body content for the full profile.
- Template rendering: team.njk iterates over the Eleventy collection of team members, rendering both the homepage teaser grid and the full-profile layout.
- Interactive flip card: A Nunjucks macro generates the card markup, with CSS transforms and JavaScript enabling flip behavior on touch devices.
- Editing configurations: Netlify CMS and TinaCMS define the same frontmatter fields for consistent authoring.
Key frontmatter fields observed in the content files:
- anchor: URL anchor for linking to a specific profile.
- name: Full name.
- role: Job title or role.
- order: Numeric ordering for display.
- image_index: Thumbnail/homepage card image.
- image_profile: Full-profile page image.
- image_alt_index: Alt text for the card image.
- image_alt_profile: Alt text for the profile image.
- bio_short: Short bio shown on the card back.
- featured: Boolean flag indicating prominence.
Body content:
- The Markdown body becomes the full profile copy rendered on the team page.
Section sources
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
- [team.njk](file://src/team.njk)
Architecture Overview
The team profile pipeline connects content, templates, styles, and scripts to deliver an interactive, accessible, and responsive team page.
sequenceDiagram
participant Author as "Author (Netlify CMS / TinaCMS)"
participant Repo as "Markdown Files<br/>src/content/team/*.md"
participant Eleventy as "Eleventy Build"
participant Template as "team.njk"
participant Macro as "team-flip-card.njk"
participant Styles as "CSS Modules"
participant Script as "team-card-flip.js"
participant Browser as "Browser"
Author->>Repo : Edit frontmatter and body
Repo->>Eleventy : Frontmatter + body parsed
Eleventy->>Template : Collections and data passed
Template->>Macro : Render flip cards for grid
Macro->>Styles : Apply card flip styles
Template->>Styles : Apply full-profile styles
Script->>Browser : Initialize touch flip behavior
Browser-->>Template : Rendered team page
Diagram sources
- [team.njk](file://src/team.njk)
- [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk)
- [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css)
- [20-team-page-full-profiles.css](file://src/assets/css/modules/20-team-page-full-profiles.css)
- [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js)
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
Detailed Component Analysis
Frontmatter Schema and Content Model
The frontmatter defines the identity, presentation, and accessibility of each team member. The schema is consistent across content files and editable via both Netlify CMS and TinaCMS.
erDiagram
TEAM_MEMBER {
string anchor
string name
string role
number order
string image_index
string image_profile
string image_alt_index
string image_alt_profile
string bio_short
boolean featured
string body
}
- anchor: Unique identifier used for linking to a specific profile.
- name: Display name.
- role: Professional role or title.
- order: Numeric sort key for consistent ordering.
- image_index: Image used in the homepage teaser card.
- image_profile: Image used on the full-profile page.
- image_alt_index: Alt text for the teaser image.
- image_alt_profile: Alt text for the profile image.
- bio_short: Short description shown on the card back.
- featured: Prominence flag (used in templates).
- body: Full biography content.
Diagram sources
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
- [schema.gql](file://tina/generated/schema.gql)
- [types.ts](file://tina/generated/types.ts)
Section sources
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
- [schema.gql](file://tina/generated/schema.gql)
- [types.ts](file://tina/generated/types.ts)
Interactive Flip Card Component
The flip card presents a profile teaser on the homepage grid and reveals a short bio on click or hover. On touch devices, tapping toggles the flipped state.
classDiagram
class TeamFlipCardMacro {
+card(item)
}
class TeamGridStyles {
+team-card
+team-card-inner
+team-card-front
+team-card-back
+team-name
+team-role
+team-bio
+team-social-btn
}
class TeamCardFlipJS {
+initTeamCardFlip()
}
TeamFlipCardMacro --> TeamGridStyles : "renders"
TeamCardFlipJS --> TeamGridStyles : "toggles .flipped"
- Macro: Generates the card structure using frontmatter fields and links to the full profile.
- Styles: Define 3D flip behavior, overlay text, and responsive layout.
- Script: Adds a click handler for touch devices to toggle the flipped state.
Diagram sources
- [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk)
- [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css)
- [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js)
Section sources
- [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk)
- [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css)
- [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js)
Rendering on the Team Page and Individual Profiles
The team page template iterates over the Eleventy collection to render:
- A sticky profile image block with the full name and role.
- The full biography from the Markdown body.
- Each profile block is anchored by the frontmatter anchor for direct linking.
sequenceDiagram
participant Eleventy as "Eleventy"
participant Template as "team.njk"
participant Member as "Member Data"
participant Browser as "Browser"
Eleventy->>Template : collections.teamMembers
loop For each member
Template->>Member : Read frontmatter and body
Template->>Browser : Render profile block with anchor
Template->>Browser : Render image and role
Template->>Browser : Render full bio from body
end
Diagram sources
- [team.njk](file://src/team.njk)
Section sources
- [team.njk](file://src/team.njk)
Relationship Between Team Profiles and Case Study Contributions
Case studies reference team members by name and role to highlight contributor expertise and leadership. The team page’s profile blocks include the role field, which can be used to associate contributions by title or specialty. While the codebase does not define a formal taxonomy for “expertise areas,” the role and bio fields serve as primary signals for linking contributions.
Practical approach:
- Use the role field to indicate domain expertise (e.g., “Government Relations Specialist”).
- Reference team members by name in case study frontmatter or body.
- Link to the team profile anchor for deeper context.
Section sources
- [team.njk](file://src/team.njk)
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
Content Creation Workflow
- Create or edit a Markdown file under src/content/team with the required frontmatter fields.
- Add a concise short bio for the card back and a detailed biography in the Markdown body.
- Ensure images are uploaded and referenced via image_index and image_profile.
- Confirm alt texts for accessibility.
- Save and build the site to preview changes.
Photo requirements:
- Use high-resolution portraits with neutral backgrounds.
- Prefer headshots with good lighting and centered composition.
- Keep aspect ratios consistent for grid alignment.
- Provide alt texts that include the person’s name and role.
Biography writing guidelines:
- Keep the card short bio concise and scannable.
- Use the full bio to tell a compelling story, emphasizing achievements and relevant experience.
- Reference roles and titles to connect contributions to expertise.
Skill categorization:
- Use the role field to signal domains (e.g., Government Relations, Strategic Communications).
- Optionally include keywords in the short bio for discoverability.
Section sources
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
Practical Examples of Compelling Bios
- Focus on impact: Highlight outcomes and stakeholder benefits.
- Use concrete examples: Reference notable clients, policies, or campaigns.
- Emphasize transferable skills: Connect past roles to current expertise.
- Keep tone professional yet human: Use active voice and clear structure.
Examples in the repository demonstrate:
- Foundational narrative: Establishing background and current role.
- Experience synthesis: Summarizing diverse roles and achievements.
- Leadership context: Mentioning positions of responsibility and influence.
Section sources
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
Integration with the Main Team Page and Individual Profile Pages
- Main team page: Renders a grid of flip cards and a full-profile layout for each member.
- Individual profile pages: Each profile block is anchored by the frontmatter anchor, enabling direct linking from other pages (e.g., case studies).
flowchart TD
Start(["Open Team Page"]) --> Grid["Render Flip Cards"]
Grid --> Hover["Hover or Tap to Flip"]
Hover --> Back["Show Short Bio"]
Back --> ReadMore["Click Read More"]
ReadMore --> Anchor["Navigate to Profile Block by Anchor"]
Anchor --> FullBio["Display Full Biography"]
FullBio --> End(["Done"])
Diagram sources
- [team.njk](file://src/team.njk)
- [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk)
- [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css)
Section sources
- [team.njk](file://src/team.njk)
- [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk)
Dependency Analysis
The team system depends on:
- Content files providing frontmatter and body content.
- Eleventy configuration exposing a teamMembers collection.
- Templates consuming the collection to render cards and full profiles.
- Styles enabling the flip animation and responsive layout.
- Scripts adding device-specific interaction.
- Editing configurations synchronizing frontmatter fields across CMSs.
graph LR
CM["Netlify CMS Fields"] --> MD["Markdown Frontmatter"]
TC["TinaCMS Fields"] --> MD
MD --> EL["Eleventy Collection"]
EL --> TN["team.njk"]
TN --> ST["Full-Profile Styles"]
TN --> TG["Teaser Grid Styles"]
TG --> JS["team-card-flip.js"]
Diagram sources
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
- [team.11tydata.json](file://src/content/team/team.11tydata.json)
- [team.njk](file://src/team.njk)
- [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css)
- [20-team-page-full-profiles.css](file://src/assets/css/modules/20-team-page-full-profiles.css)
- [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js)
Section sources
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
- [team.11tydata.json](file://src/content/team/team.11tydata.json)
- [team.njk](file://src/team.njk)
Performance Considerations
- Lazy loading: Images use a lazy loading attribute to improve initial page load.
- Minimal JavaScript: The flip script only initializes on touch devices, reducing overhead on desktop.
- CSS transforms: The flip effect leverages GPU-friendly transforms for smooth animations.
- Responsive images: Grid and profile images adapt to viewport sizes.
Recommendations:
- Compress images and serve modern formats where possible.
- Use appropriate image sizes to avoid oversizing.
- Monitor cumulative layout shift (CLS) by keeping image dimensions predictable.
Section sources
- [team.njk](file://src/team.njk)
- [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css)
- [20-team-page-full-profiles.css](file://src/assets/css/modules/20-team-page-full-profiles.css)
- [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js)
Troubleshooting Guide
Common issues and resolutions:
- Missing images: If image fields are empty, a placeholder background is shown. Ensure image paths are correct and assets are uploaded.
- Alt text missing: Provide alt texts for both card and profile images to meet accessibility guidelines.
- Flip not working on mobile: Verify the script runs on touch devices and that the container has the correct class.
- Out-of-order profiles: Set the order field numerically to control display sequence.
- Broken anchors: Ensure the anchor value matches the profile block id used for internal linking.
Section sources
- [team.njk](file://src/team.njk)
- [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js)
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)
Conclusion
Team Profiles combine structured frontmatter with flexible Markdown bodies to deliver an engaging, accessible, and maintainable presentation. The flip card component enhances discovery, while the full-profile layout provides depth. Consistent photo standards, concise short bios, and clear role definitions help teams communicate expertise effectively and integrate seamlessly with case study contributions.
Appendices
Frontmatter Field Reference
- anchor: Unique URL anchor for the profile.
- name: Full name.
- role: Role or title.
- order: Numeric sort key.
- image_index: Homepage teaser image.
- image_profile: Full-profile image.
- image_alt_index: Alt text for teaser image.
- image_alt_profile: Alt text for profile image.
- bio_short: Short bio for the card back.
- featured: Prominence flag.
- body: Full biography content.
Section sources
- [config.yml](file://src/admin/config.yml)
- [config.ts](file://tina/config.ts)
- [schema.gql](file://tina/generated/schema.gql)
- [types.ts](file://tina/generated/types.ts)
- [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md)
- [02-kevin-naughton.md](file://src/content/team/02-kevin-naughton.md)
- [03-guy-boekenstein.md](file://src/content/team/03-guy-boekenstein.md)
- [04-mel-jones.md](file://src/content/team/04-mel-jones.md)